<script setup>
// 获取商品信息
import axios from "axios";
import { ref, onMounted, watch } from "vue";
import { useRoute } from "vue-router"; //获取当前的理由对象
import { useShopcartStore } from "@/stores/shopcart";
import { ElMessage } from "element-plus";

const shopcartStore = useShopcartStore();

// 向axios发出请求
const route = useRoute(); //route.query.skey

let props = defineProps({
  cate: String,
  customBooksList: {
    type: Array,
    default: () => [],
  },
});

let booksList = ref([]);

const getBooksList = async () => {
  // 如果有自定义书籍列表，直接使用
  if (props.customBooksList && props.customBooksList.length > 0) {
    booksList.value = props.customBooksList;
    return;
  }

  try {
    let res = await axios.get("/api/booksList");
    // res.data={code:xxx,message:xxx,data:xxx}  商品信息 res.data.data
    // console.log(res);
    if (res.data.code === 200) {
      res.data = res.data.data;
      if (props.cate === "搜索") {
        // 商品名称中包含关键词：skey
        booksList.value = res.data.filter((item) => {
          return item.name.includes(route.query.skey);
        });
        console.log(booksList.value);
      } else {
        booksList.value = res.data;
      }
    } else {
      console.log(res.data.message);
    }
  } catch (err) {
    console.log(err);
  }
};

// 监听customBooksList属性变化
watch(
  () => props.customBooksList,
  (newVal) => {
    if (newVal && newVal.length > 0) {
      booksList.value = newVal;
    }
  },
  { deep: true }
);

onMounted(() => {
  getBooksList();
});
const addToCart = async (item) => {
  const result = await shopcartStore.addToCart(item.b_id, 1);
  console.log(result.success);

  if (result.success) {
    ElMessage.success("加入购物车成功");
  } else {
    ElMessage.error(result.message || "加入购物车失败");
  }
};
let num = ref(1);
const add = (item) => {
  let books = {
    booksname: item.name || item.bookname,
    price: item.price,
    img: item.img,
    isChecked: true,
    num: num.value,
    username: localStorage.getItem("isLogin"),
  };
  shopcartStore.addShopcart(books);
  console.log(books);
};
</script>

<template>
  <ul class="clearfix" id="partBooks">
    <li v-for="item in booksList" :key="item.id || item.b_id">
      <!-- 1121{{ booksList }} -->
      <div class="recomBox clearfix">
        <div class="Img bookLeft">
          <a href="#" :title="item.name || item.bookname"
            ><img
              :src="item.img"
              class="Z120"
              :alt="item.name || item.bookname"
          /></a>
        </div>
        <div class="text bookLeft">
          <p class="name">
            <a href="#" :title="item.name || item.bookname">{{
              item.name || item.bookname
            }}</a>
          </p>
          <div class="auPu">
            <p class="author">
              作者：<b>{{ item.author }}</b>
            </p>
            <p class="publish">
              出版社：<b>{{ item.publish }}</b>
            </p>
          </div>
          <div class="priceWrap">
            <p class="np">
              定价：<span>{{ item.price }}</span>
            </p>
          </div>
          <p class="add" id="">
            <!-- <a href="#" @click.prevent="add(item)">加入购物车</a> -->
            <a href="javascript:void(0);" @click.prevent="addToCart(item)"
              >加入购物车</a
            >
          </p>
        </div>
      </div>
    </li>
  </ul>
</template>

<style scoped>
.clearfix {
  zoom: 1;
  display: block;
}
ul li {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 24px;
  color: #333333;
}
#partBooks li {
  width: 470px;
  float: left;
  background: #fff;
  margin: 0px 20px 20px 0px;
  display: inline;
  /* background: rgba(255, 255, 255, 0.4); */
  background-color: #f7f7f7;
  border-radius: 4px;
  position: relative;
}

.recomBox {
  background-color: #fff;
  border-radius: 4px;
}
.recomBox:hover {
  background-color: #e6f5fa;
}
#partBooks li .recomBox {
  padding: 15px 0px;
}
.Img {
  text-align: center;
  padding: 10px;
}
#partBooks .Img {
  width: 170px;
  height: 150px;
}
.bookLeft {
  float: left;
}
.Img a {
  display: block;
}
ul li a {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #333333;
  text-decoration: none;
}
#partBooks li .Img img {
  height: 150px;
  max-width: 150px;
}
#partBooks .text {
  width: 260px;
}
.text {
  padding: 0px;
}
.name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 26px;
  line-height: 26px;
}
.name a,
.tuanName a {
  color: #ab2d22;
  font-size: 14px;
  font-weight: normal;
}
.auPu {
  margin-top: 5px;
  height: 44px;
}
.author,
.publish {
  height: 22px;
  line-height: 22px;
  color: #666;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.actLabel {
  height: 23px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 5px;
}
#partBooks .priceWrap {
  left: 180px;
  bottom: 20px;
  padding: 0 10px;
}
.priceWrap {
  overflow: hidden;
  height: 50px;
  position: absolute;
}
.np span {
  color: #e52828;
  font-size: 14px;
  font-weight: bold;
}
#partBooks .add,
#partBooks {
  right: 40px;
  bottom: 30px;
}
.add {
  line-height: 26px;
  text-align: center;
  color: #fff;
  position: absolute;
}
.add a {
  background-color: #e52828;
  display: block;
  height: 26px;
  border-radius: 3px;
  line-height: 26px;
  width: 62px;
  text-align: center;
  color: #fff;
  font-size: 14px;
}
</style>
